<template>
  <div class="big-screen">
    <Header :title="title" />
    <div class="w-full" style="height: calc(100% - 105px)">
      <el-row :gutter="2" class="h-full">
        <!-- 左侧 -->
        <el-col :span="8">
          <!-- 近一年产生重量统计 -->
          <div class="h-1/3">
            <div class="w-1/3 h-4 mx-2 model-title">近一年产生重量统计</div>
            <dv-border-box12
              class="w-full p-2 datav-border"
              :color="['#6e87a4', '#40c3c8']"
            >
              <LineChart
                :data="lineData"
                unit="吨"
                title="单位"
                class="w-full h-full inline-block"
              />
            </dv-border-box12>
          </div>
          <!-- 产生种类构成 -->
          <div class="h-1/3">
            <div class="w-1/3 h-4 mx-2 model-title">5月产生种类构成</div>
            <dv-border-box12
              class="w-full p-2 datav-border"
              :color="['#6e87a4', '#40c3c8']"
            >
              <TopChart
                :data="topData"
                unit="%"
                class="w-full h-full inline-block"
              />
            </dv-border-box12>
          </div>
          <!-- 产生信息 -->
          <div class="h-1/3">
            <div class="w-1/3 h-4 mx-2 model-title">产生信息</div>
            <dv-border-box12
              class="w-full p-2 datav-border"
              :color="['#6e87a4', '#40c3c8']"
            >
              <Table :tableData="tableData" :tableColumns="tableColumns" />
            </dv-border-box12>
          </div>
        </el-col>
        <!-- 中间 -->
        <el-col :span="8">
          <div class="h-1/4 mt-5">
            <dv-border-box7
              class="w-full p-2 datav-border"
              :color="['#6e87a4', '#40c3c8']"
            >
              <StaticBarChart />
            </dv-border-box7>
          </div>
          <div class="h-3/4">
            <GeoMap />
          </div>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="8">
          <!-- 近一年收集重量统计 -->
          <div class="h-1/3">
            <div class="w-1/3 h-4 mx-2 model-title">近一年收集重量统计</div>
            <dv-border-box12
              class="w-full p-2 datav-border"
              :color="['#6e87a4', '#40c3c8']"
            >
              <BarChart
                :data="barData"
                unit="吨"
                title="单位"
                class="w-full h-full inline-block"
              />
            </dv-border-box12>
          </div>
          <!-- 收集种类构成 -->
          <div class="h-1/3">
            <div class="w-1/3 h-4 mx-2 model-title">5月收集种类构成</div>
            <dv-border-box12
              class="w-full p-2 datav-border"
              :color="['#6e87a4', '#40c3c8']"
            >
              <PieChart
                :data="pieData"
                :position="position"
                :showLabel="showLabel"
                class="w-full h-full"
              />
            </dv-border-box12>
          </div>
          <!-- 收集信息 -->
          <div class="h-1/3">
            <div class="w-1/3 h-4 mx-2 model-title">收集信息</div>
            <dv-border-box12
              class="w-full p-2 datav-border"
              :color="['#6e87a4', '#40c3c8']"
            >
              <AutoScrollList :data="autoScrollData" />
            </dv-border-box12>
          </div>
        </el-col>
      </el-row>
      <Footer style="position: absolute; bottom: -15px" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Header from "./components/header.vue";
import Footer from "./components/footer.vue";
const title = ref<string>("医疗废物智能化追溯管理平台");

// 产生废物量
import LineChart from "./components/lineChart.vue";
const lineData = reactive<Array>([
  { name: "2023-05", value: 80 },
  { name: "2023-06", value: 75 },
  { name: "2023-07", value: 70 },
  { name: "2023-08", value: 63 },
  { name: "2023-09", value: 75 },
  { name: "2023-10", value: 79 },
  { name: "2023-11", value: 68 },
  { name: "2023-12", value: 82 },
  { name: "2024-01", value: 71 },
  { name: "2024-02", value: 69 },
  { name: "2024-03", value: 85 },
  { name: "2024-04", value: 78 }
]);

// 产生构成种类
import TopChart from "./components/topChart.vue";
const topData = reactive<Array>([
  { name: "感染性", value: 69.85 },
  { name: "损伤性", value: 13.58 },
  { name: "病理性", value: 9.37 },
  { name: "药物性", value: 5.19 },
  { name: "化学性", value: 3.01 }
]);

// 收集废物量
import BarChart from "./components/barChart.vue";
const barData = reactive<Array>([
  { name: "2023-05", value: 80 },
  { name: "2023-06", value: 75 },
  { name: "2023-07", value: 70 },
  { name: "2023-08", value: 63 },
  { name: "2023-09", value: 75 },
  { name: "2023-10", value: 79 },
  { name: "2023-11", value: 68 },
  { name: "2023-12", value: 82 },
  { name: "2024-01", value: 71 },
  { name: "2024-02", value: 69 },
  { name: "2024-03", value: 85 },
  { name: "2024-04", value: 78 }
]);

// 收集构成种类
import PieChart from "./components/pieChart.vue";
const pieData = reactive<Array>([
  { name: "感染性", value: 39.85 },
  { name: "损伤性", value: 33.58 },
  { name: "病理性", value: 20.37 },
  { name: "药物性", value: 19.19 },
  { name: "化学性", value: 17.01 }
]);
const position = reactive<Object>({
  pie: ["35%", "50%"],
  legend: "10%"
});
const showLabel = ref<Boolean>(true);

// 产生 & 收集信息
import Table from "./components/table.vue";
const tableColumns = reactive<Array>([
  { name: "医疗机构", field: "institution", width: 150 },
  { name: "种类", field: "type" },
  { name: "产生人", field: "responser" },
  { name: "重量", field: "weight" },
  { name: "产生时间", field: "time" }
]);
const tableData = reactive<Array>([
  {
    institution: "北京市第一医院",
    type: "感染性",
    responser: "郭富城",
    weight: "200kg",
    time: "2024-05-03"
  },
  {
    institution: "北京市第一医院",
    type: "损伤性",
    responser: "黎明",
    weight: "180kg",
    time: "2024-05-03"
  },
  {
    institution: "北京市第一医院",
    type: "感染性",
    responser: "张学友",
    weight: "200kg",
    time: "2024-05-03"
  },
  {
    institution: "北京市第一医院",
    type: "药物性",
    responser: "刘德华",
    weight: "100kg",
    time: "2024-05-03"
  },
  {
    institution: "北京市第一医院",
    type: "感染性",
    responser: "周润发",
    weight: "120kg",
    time: "2024-05-03"
  }
]);

// 引入地图
import GeoMap from "./components/geoMap.vue";
// 引入统计柱状图
import StaticBarChart from "./components/staticBarChart.vue";
// 引入滚动列表
import AutoScrollList from "./components/autoScrollList.vue";
const autoScrollData = reactive<Array>([
  "刘德华 在 门诊大楼 于 2024-05-01 14:00 收集了 11.2 kg 医疗废物",
  "张曼玉 在 急诊科 于 2024-05-01 15:00 收集了 12.0 kg 医疗废物",
  "成龙 在 呼吸科 于 2024-05-01 16:00 收集了 13.5 kg 医疗废物",
  "张学友 在 肿瘤科 于 2024-05-01 13:00 收集了 11.7 kg 医疗废物",
  "周润发 在 感染科 于 2024-05-01 12:00 收集了 13.1 kg 医疗废物",
  "周星驰 在 儿科 于 2024-05-01 11:00 收集了 12.2 kg 医疗废物",
  "郭富城 在 外科大楼 于 2024-05-01 17:00 收集了 20.1 kg 医疗废物",
  "梁家辉 在 急诊科 于 2024-05-01 15:00 收集了 12.0 kg 医疗废物",
  "钟楚红 在 骨科 于 2024-05-01 18:00 收集了 11.8 kg 医疗废物",
  "刘嘉玲 在 妇产科 于 2024-05-01 19:00 收集了 12.7 kg 医疗废物",
  "李连杰 在 感染科 于 2024-05-01 12:00 收集了 13.1 kg 医疗废物",
  "任达华 在 肿瘤科 于 2024-05-01 13:00 收集了 11.7 kg 医疗废物",
  "梁朝伟 在 神经科 于 2024-05-01 10:00 收集了 11.3 kg 医疗废物",
  "古天乐 在 儿科 于 2024-05-01 11:00 收集了 12.2 kg 医疗废物",
  "洪金宝 在 内科 于 2024-05-01 08:00 收集了 13.9 kg 医疗废物",
  "王祖贤 在 呼吸科 于 2024-05-01 16:00 收集了 13.5 kg 医疗废物"
]);
</script>

<style scoped lang="scss"></style>
